<script setup lang="ts">
    import { computed, ref, watch } from 'vue';
    import { api } from '@/services/api';
    import { useUserStore } from '@/stores/user';
    import { parseTime } from '@/utils';

    import { ElMessage } from 'element-plus';

    const userStore = useUserStore();

    // 用户信息
    const userInfo = computed(() => userStore.userInfo);

    watch(
        () => userInfo.value,
        (data) => {
            // 用户昵称
            userNameLabel.value.value = data.nickName;
            // 个性签名
            signatureLabel.value.value = data.signature;
            // 性别
            sexLabel.value.value = data.sex;
            // 出生日期
            birthdayLabel.value.value = data.birthday;
            // QQ
            qqLabel.value.value = data.qq;
            // 微信
            weixinLabel.value.value = data.weixin;
            // 居住地
            addressLabel.value.value = data.address;
            // 个人网站名称
            webSiteNameLabel.value.value = data.webSiteName;
            // 个人网站URL地址
            webSiteNameLabel.value.url = data.webSiteUrl;
        }
    );

    // 用户昵称
    const userNameLabel = ref<{ value?: string, isHidden: Boolean }>({
        value: "",
        isHidden: false
    });
    // 个性签名
    const signatureLabel = ref<{ value?: string, isHidden: Boolean }>({
        value: "",
        isHidden: false
    });
    // 性别
    const sexLabel = ref<{ value?: string, isHidden: Boolean, options: Object }>({
        value: "",
        isHidden: false,
        options: [
            {
                value: '0',
                label: '男'
            }, {
                value: '1',
                label: '女'
            }
        ]
    });
    // 出生日期
    const birthdayLabel = ref<{ value?: string, isHidden: Boolean, minDate: Date }>({
        value: "",
        isHidden: false,
        minDate: new Date(1980, 0, 1)
    });
    // QQ
    const qqLabel = ref<{ value?: string, isHidden: Boolean }>({
        value: "",
        isHidden: false
    });
    // 微信
    const weixinLabel = ref<{ value?: string, isHidden: Boolean }>({
        value: "",
        isHidden: false
    });
    // 居住地
    const addressLabel = ref<{ value?: string, isHidden: Boolean }>({
        value: "",
        isHidden: false
    });
    // 个人网站
    const webSiteNameLabel = ref<{ value?: string, url?: string, isHidden: Boolean }>({
        value: "",
        url: "",
        isHidden: false
    });

    /**
     * 修改用户信息
     * @param key 
     * @param arr 
     */
    const updateUserInfo = (key: String, ...arr: string[]) => {
        var data = [];
        // 博客信息
        if(key === 'webSite') {
            data = [{
                key : "webSiteName",
                value : arr[0]
            }, {
                key : "webSiteUrl",
                value : arr[1]
            }];
        } else {
            let value: string | null;
            if(key === 'birthday') {
                value = parseTime(arr[0], '{y}-{m}-{d}');
            } else {
                value = arr[0];
            }
            data = [{ key, value }];
        }
        // 修改用户信息接口
        api
        .user
        .updateUserInfo(data)
        .then(response => {
            if(response.code === 0) {
                ElMessage.success("修改成功！");
            }
        });
    }

</script>
<template>
    <ul class="data-ul">
        <li class="data-li">
            <div class="content-show-l">用户昵称</div>
            <template v-if="!userNameLabel.isHidden">
                <div class="content-show-r">{{userNameLabel.value ? userNameLabel.value : '未设置'}}</div>
                <div class="user-edit-button" @click="userNameLabel.isHidden = !userNameLabel.isHidden"><el-icon :size="16"><Edit /></el-icon>&nbsp;<span>编辑</span></div>
            </template>
            <template v-if="userNameLabel.isHidden">
                <div class="content-show-r">
                    <el-input v-model="userNameLabel.value" placeholder="请输入用户昵称" style="width:350px"></el-input>
                    <div class="edit-button">
                        <el-button type="primary" @click="updateUserInfo('nickName', userNameLabel.value ? userNameLabel.value : '')" plain>保存</el-button>
                        <el-button @click="userNameLabel.isHidden = !userNameLabel.isHidden" plain>取消</el-button>
                    </div>
                </div>
            </template>
        </li>
        <li class="data-li">
            <div class="content-show-l">性别</div>
            <template v-if="!sexLabel.isHidden">
                <div class="content-show-r">{{sexLabel.value ? (sexLabel.value === '0' ? '男' : '女') : "未设置"}}</div>
                <div class="user-edit-button" @click="sexLabel.isHidden = !sexLabel.isHidden"><el-icon :size="16"><Edit /></el-icon>&nbsp;编辑</div>
            </template>
            <template v-if="sexLabel.isHidden">
                <div class="content-show-r">
                    <el-radio v-model="sexLabel.value" label="0">男</el-radio>
                    <el-radio v-model="sexLabel.value" label="1">女</el-radio>
                    <div class="edit-button">
                        <el-button type="primary"  @click="updateUserInfo('sex', sexLabel.value ? sexLabel.value : '')" plain>保存</el-button>
                        <el-button @click="sexLabel.isHidden = !sexLabel.isHidden" plain>取消</el-button>
                    </div>
                </div>
            </template>
        </li>
        <li class="data-li">
            <div class="content-show-l">出生日期</div>
            <template v-if="!birthdayLabel.isHidden">
                <div class="content-show-r">{{birthdayLabel.value ? (birthdayLabel.value) : "未设置"}}</div>
                <div class="user-edit-button" @click="birthdayLabel.isHidden = !birthdayLabel.isHidden"><el-icon :size="16"><Edit /></el-icon>&nbsp;编辑</div>
            </template>
            <template v-if="birthdayLabel.isHidden">
                <div class="content-show-r">
                    <el-date-picker
                        v-model="birthdayLabel.value"
                        type="date"
                        style="width:350px" 
                        placeholder="请选择出生日期"
                    />
                    <div class="edit-button">
                        <el-button type="primary" @click="updateUserInfo('birthday', birthdayLabel.value ? birthdayLabel.value : '')" plain>保存</el-button>
                        <el-button @click="birthdayLabel.isHidden = !birthdayLabel.isHidden" plain>取消</el-button>
                    </div>
                </div>
            </template>
        </li>
        <li class="data-li">
            <div class="content-show-l">个性签名</div>
            <template v-if="!signatureLabel.isHidden">
                <div class="content-show-r">{{signatureLabel.value ? signatureLabel.value : "未设置"}}</div>
                <div class="user-edit-button" @click="signatureLabel.isHidden = !signatureLabel.isHidden"><el-icon :size="16"><Edit /></el-icon>&nbsp;编辑</div>
            </template>
            <template v-if="signatureLabel.isHidden">
                <div class="content-show-r">
                    <el-input v-model="signatureLabel.value" placeholder="请输入个性签名" style="width:350px"></el-input>
                    <div class="edit-button">
                        <el-button type="primary" @click="updateUserInfo('signature', signatureLabel.value ? signatureLabel.value : '')" plain>保存</el-button>
                        <el-button @click="signatureLabel.isHidden = !signatureLabel.isHidden" plain>取消</el-button>
                    </div>
                </div>
            </template>
        </li>
        <li class="data-li">
            <div class="content-show-l">QQ</div>
            <template v-if="!qqLabel.isHidden">
                <div class="content-show-r">{{qqLabel.value ? qqLabel.value : "未设置"}}</div>
                <div class="user-edit-button" @click="qqLabel.isHidden = !qqLabel.isHidden"><el-icon :size="16"><Edit /></el-icon>&nbsp;编辑</div>
            </template>
            <template v-if="qqLabel.isHidden">
                <div class="content-show-r">
                    <el-input v-model="qqLabel.value" placeholder="请输入QQ号码" style="width:350px"></el-input>
                    <div class="edit-button">
                        <el-button type="primary" @click="updateUserInfo('qq', qqLabel.value ? qqLabel.value : '')" plain>保存</el-button>
                        <el-button @click="qqLabel.isHidden = !qqLabel.isHidden" plain>取消</el-button>
                    </div>
                </div>
            </template>
        </li>
        <li class="data-li">
            <div class="content-show-l">微信</div>
            <template v-if="!weixinLabel.isHidden">
                <div class="content-show-r">{{weixinLabel.value ? weixinLabel.value : "未设置"}}</div>
                <div class="user-edit-button" @click="weixinLabel.isHidden = !weixinLabel.isHidden"><el-icon :size="16"><Edit /></el-icon>&nbsp;编辑</div>
            </template>
            <template v-if="weixinLabel.isHidden">
                <div class="content-show-r">
                    <el-input v-model="weixinLabel.value" placeholder="请输入微信号码" style="width:350px"></el-input>
                    <div class="edit-button">
                        <el-button type="primary" @click="updateUserInfo('weixin', weixinLabel.value ? weixinLabel.value : '')" plain>保存</el-button>
                        <el-button @click="weixinLabel.isHidden = !weixinLabel.isHidden" plain>取消</el-button>
                    </div>
                </div>
            </template>
        </li>
        <li class="data-li">
            <div class="content-show-l">居住地</div>
            <template v-if="!addressLabel.isHidden">
                <div class="content-show-r">{{addressLabel.value ? addressLabel.value : "未设置"}}</div>
                <div class="user-edit-button" @click="addressLabel.isHidden = !addressLabel.isHidden"><el-icon :size="16"><Edit /></el-icon>&nbsp;编辑</div>
            </template>
            <template v-if="addressLabel.isHidden">
                <div class="content-show-r">
                    <el-input v-model="addressLabel.value" placeholder="请输入居住地" style="width:350px"></el-input>
                    <div class="edit-button">
                        <el-button type="primary" @click="updateUserInfo('address', addressLabel.value ? addressLabel.value : '')" plain>保存</el-button>
                        <el-button @click="addressLabel.isHidden = !addressLabel.isHidden" plain>取消</el-button>
                    </div>
                </div>
            </template>
        </li>
        <li class="data-li">
            <div class="content-show-l">个人网站</div>
            <template v-if="!webSiteNameLabel.isHidden">
                <div class="content-show-r"><a :href="(webSiteNameLabel.url)">{{webSiteNameLabel.value ? webSiteNameLabel.value : "未设置"}}</a></div>
                <div class="user-edit-button" @click="webSiteNameLabel.isHidden = !webSiteNameLabel.isHidden"><el-icon :size="16"><Edit /></el-icon>&nbsp;编辑</div>
            </template>
            <template v-if="webSiteNameLabel.isHidden">
                <div class="content-show-r">
                    <div>
                        <el-input v-model="webSiteNameLabel.value" placeholder="请输入网站名称" style="width:350px;margin-bottom: 10px"></el-input>
                        <el-input v-model="webSiteNameLabel.url" placeholder="请输入网站url地址" style="width:350px"></el-input>
                    </div>
                    <div class="edit-button">
                        <el-button type="primary" @click="updateUserInfo('webSite', (webSiteNameLabel.value ? webSiteNameLabel.value : ''), webSiteNameLabel.url ? webSiteNameLabel.url : '')" plain>保存</el-button>
                        <el-button @click="webSiteNameLabel.isHidden = !webSiteNameLabel.isHidden" plain>取消</el-button>
                    </div>
                </div>
            </template>
        </li>
    </ul>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" />